<script setup>
import { ref, defineExpose, defineEmits } from 'vue'
import { $roleupdateapi, $roleaddapi } from '@/api/roleApi'
const dialogVisible = ref(false)
const form = ref()
const title = ref('')
const emit = defineEmits(['success'])
const formModel = ref({
    roleId:'',
  roleName: ''
})
const rules = ref({
  roleName: [
    { required: true, message: '请输入分类名称', trigger: 'blur' },
    {
      pattern: /^\S{1,10}$/,
      message: '分类名必须是1-10位的非空字符',
      trigger: 'blur'
    }
  ],
})
const onSubmit = async () => {
  await form.value.validate()
  formModel.value.roleId
    ? $roleupdateapi(formModel.value)
    : $roleaddapi(formModel.value)
  ElMessage({
    type: 'success',
    message: formModel.value.id ? '编辑成功' : '添加成功'
  })
  dialogVisible.value = false
  emit('success')
}
const open = (row) => {
  dialogVisible.value = true
  title.value = row.id ? '分类编辑' : '添加分类'
  formModel.value = { ...row }
}
defineExpose({
  open
})
</script>
<template>
  <el-dialog v-model="dialogVisible" :title="title" width="30%">
    <el-form
      ref="form"
      :model="formModel"
      status-icon
      :rules="rules"
      label-width="120px"
      class="demo-ruleForm"
    >
      <el-form-item label="角色名称" prop="roleName">
        <el-input v-model="formModel.roleName" minlength="1" maxlength="15" />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="onSubmit"> 确认 </el-button>
      </span>
    </template>
  </el-dialog>
</template>
<style scoped></style>
